<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skytech-webphone</title>
    <script src="../lib/callhelper.min.js"></script>
    <script>
	    function foo(data) {
            console.log(data.msg);
            console.log(data.data);
			if(data.msg === "READY"){
				stateReady();
			}else if(data.msg === "NOTREADY" || data.msg === "REGISTER"){
				stateNotReady();
			}else if(data.msg === "BUSY"){
				stateBusy();
			}else if(data.msg === "RINGING"){
				stateRing();
			}else if(data.msg === "ANSWERED"){
				stateAnswer();
			}else if(data.msg === "HANGUP"){
				stateHangup();
			}else if(data.msg === "HOLD"){
				stateHold();
			}else if(data.msg === "REALTIME"){
				stateRealTime();
			}else if(data.msg === "LOGOUT"){
				stateLogout();
				alert('您已登出！');
			}
		
        };
		
        window.onload = function () {
            var url = prompt("请输入登录网址(携带https://)","");
			var name = prompt("请输入你的用户名","");
			var password = prompt("请输入你的密码","");

			var config = {
                uname: name, 
                pwd: password,
                debug: true, 
                isAutoAnswer: true, 
                stateListenerCallBack: foo, 
                popScreanCallback: popScrean,
                autoReady: true,
                url: url
                };

            CallHelper.init(config, initCallback);
			
            document.getElementById('register').addEventListener('click', function () {
                CallHelper.register();
            }, false);

            document.getElementById('unregister').addEventListener('click', function () {
                CallHelper.unregister();
            }, false);

            document.getElementById('ready').addEventListener('click', function () {
                CallHelper.ready(stateCallBack);
            }, false);

            document.getElementById('notready').addEventListener('click', function () {
                CallHelper.notready(stateCallBack);
            }, false);

            document.getElementById('busy').addEventListener('click', function () {
                CallHelper.busy(stateCallBack);
            }, false);

            document.getElementById('makecall').addEventListener('click', function () {
                var callnum = document.getElementById('tel_num').value.replace(/\s/g,'');
                CallHelper.invite(callnum, inviteCallBack);
            }, false);

            document.getElementById('answer').addEventListener('click', function () {
                CallHelper.answer();
            }, false);

            document.getElementById('hold').addEventListener('click', function () {
                CallHelper.hold();
            }, false);

            document.getElementById('unhold').addEventListener('click', function () {
                CallHelper.unhold();
            }, false);

            document.getElementById('hangup').addEventListener('click', function () {
                CallHelper.hangup();
            }, false);

            document.getElementById('transfer').addEventListener('click', function(){
                var thirdNum = document.getElementById('tel_num').value.replace(/\s/g,'');;
                CallHelper.transfer(thirdNum);
            }, false);

            document.getElementById('threeway').addEventListener('click', function(){
                var thirdNum = document.getElementById('tel_num').value.replace(/\s/g,'');;
                CallHelper.threeCall(thirdNum);
            }, false);
        };

        function popScrean(data){
            document.getElementById('callnumber').innerHTML = data;
        }
		
		function initCallback(data){
			console.info('issuccess : ' + data.successChange);
			console.info('msg : ' + data.msg);
            console.info('agentnumber: ' + data.data.agentnumber);
			if(data.successChange){
				//alert('您已登录成功！');
                document.getElementById('agentnumber').innerHTML = data.data.agentnumber;
			}else{
				alert('登录失败，请检查账号密码!');
			}
		}
		
		function inviteCallBack(data){
			console.log("call state is :" + data.state);
			console.log("uuid is :" + data.msg);
		}
		
		function stateCallBack(data){
			console.info("successChange is :" + data.successChange);
			console.info("changeState is :" + data.changeState);
		}
		

        function stateLogout() {
            setButtonUseable('register');
            setButtonDisabled('unregister');
            setButtonDisabled('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonDisabled('answer');
            setButtonDisabled('hold');
            setButtonDisabled('unhold');
            setButtonDisabled('hangup');

            setButtonDisplayBlock('register');
            setButtonDisplayNone('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '签出';
            document.getElementById('agentnumber').innerHTML = '&nbsp;';
            time_stop();
        }

        function stateReady() {
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonDisabled('ready');
            setButtonUseable('notready');
            setButtonUseable('busy');
            setButtonUseable('makecall');
            setButtonDisabled('answer');
            setButtonDisabled('hold');
            setButtonDisabled('unhold');
            setButtonDisabled('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '就绪';

            //状态放浏览器缓存中，如果是上个状态没变化 不要执行这个
            time_stop();
            time_run();
        }

        function stateNotReady() {
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonUseable('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonDisabled('answer');
            setButtonDisabled('hold');
            setButtonDisabled('unhold');
            setButtonDisabled('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '离席';
            time_stop();
            time_run();
        }

        function stateBusy() {
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonUseable('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonDisabled('answer');
            setButtonDisabled('hold');
            setButtonDisabled('unhold');
            setButtonDisabled('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '示忙';
            time_stop();
            time_run();
        }

        function stateRing() {
			console.log(111);
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonDisabled('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonUseable('answer');
            setButtonDisabled('hold');
            setButtonDisabled('unhold');
            setButtonUseable('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '振铃中';
            document.getElementById('ringAudio').play();
            time_stop();
            time_run();
        }

        function stateAnswer() {
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonDisabled('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonDisabled('answer');
            setButtonDisabled('hold');
            setButtonDisabled('unhold');
            setButtonUseable('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '通话中';
            document.getElementById('ringAudio').pause();
        }

        function stateRealTime() {
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonDisabled('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonDisabled('answer');
            setButtonUseable('hold');
            setButtonDisabled('unhold');
            setButtonUseable('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonUseable('transfer');
            setButtonUseable('threeway');

            document.getElementById('callstate').innerHTML = '通话中';
            document.getElementById('ringAudio').pause();
            time_stop();
            time_run();
        }

        function stateHold() {
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonDisabled('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonDisabled('answer');
            setButtonDisabled('hold');
            setButtonUseable('unhold');
            setButtonDisabled('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayNone('hold');
            setButtonDisplayBlock('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '保持中';
        }

        function stateHangup() {
            setButtonDisabled('register');
            setButtonUseable('unregister');
            setButtonUseable('ready');
            setButtonDisabled('notready');
            setButtonDisabled('busy');
            setButtonDisabled('makecall');
            setButtonDisabled('answer');
            setButtonDisabled('hold');
            setButtonDisabled('unhold');
            setButtonDisabled('hangup');

            setButtonDisplayNone('register');
            setButtonDisplayBlock('unregister');
            setButtonDisplayBlock('hold');
            setButtonDisplayNone('unhold');

            setButtonDisabled('transfer');
            setButtonDisabled('threeway');

            document.getElementById('callstate').innerHTML = '挂机';
            document.getElementById('callnumber').innerHTML = '&nbsp;';
            document.getElementById('ringAudio').pause();
            document.getElementById('hangupAudio').play();
            time_stop();
        }

        function setButtonUseable(buttonId) {
            document.getElementById(buttonId).disabled = false;
            document.getElementById(buttonId).className = buttonId;
        }
        
        function setButtonDisabled(buttonId) {
            document.getElementById(buttonId).disabled = true;
            document.getElementById(buttonId).className = buttonId + '-disabled';
        }

        function setButtonDisplayNone(buttonId) {
            document.getElementById(buttonId).style.display = 'none';
        }

        function setButtonDisplayBlock(buttonId) {
            document.getElementById(buttonId).style.display = 'block';
        }


        function two_char(n) {
            return n >= 10 ? n : '0'+n;
        }

        var timer;
        function time_run() {
            var sec = 0;
            timer = setInterval(function () {
                sec ++;
                var date = new Date(0, 0);
                date.setSeconds(sec);
                var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
                document.getElementById('calltime').innerHTML = two_char(h) + ':' + two_char(m) + ':' + two_char(s);
            }, 1000);
        }
        function time_stop() {
            clearInterval(timer);
        }


    </script>

    <style>
        *{font-family:"微软雅黑"}
        .btn{background-color:#e6f3fc;border: 1px solid #b1defd;height:30px;}
        table button{width:40px;height:55px;border:none;}

        .label-title{min-width: 70px; font-size: 14px; font-weight: bold; height: 22px; text-align: center;
            display: inline-block;width: 100%;}
        .label-content{min-width: 70px; font-size: 14px; text-align: center; height: 22px; padding: 2px 5px;
            box-shadow: inset 2px 2px 2px #4DFFFF; border-radius: 4px; background: #00FFFF;display: inline-block;}

        .register{background: url(./images/register.png) no-repeat;}
        .register-disabled{background: url(./images/register1.png) no-repeat;}
        .register:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .unregister{background: url(./images/unregister.png) no-repeat;}
        .unregister-disabled{background: url(./images/unregister1.png) no-repeat;}
        .unregister:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .ready{background: url(./images/changeStatusFree.png) no-repeat;}
        .ready-disabled{background: url(./images/changeStatusFree1.png) no-repeat;}
        .ready:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .notready{background: url(./images/unset.png) no-repeat;}
        .notready-disabled{background: url(./images/unset1.png) no-repeat;}
        .notready:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .busy{background: url(./images/changeStatusBusy.png) no-repeat;}
        .busy-disabled{background: url(./images/changeStatusBusy1.png) no-repeat;}
        .busy:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .makecall{background: url(./images/makeCall.png) no-repeat;}
        .makecall-disabled{background: url(./images/makeCall1.png) no-repeat;}
        .makecall:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .answer{background: url(./images/answer.png) no-repeat;}
        .answer-disabled{background: url(./images/answer1.png) no-repeat;}
        .answer:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .hold{background: url(./images/hold.png) no-repeat;}
        .hold-disabled{background: url(./images/hold1.png) no-repeat;}
        .hold:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .unhold{background: url(./images/unhold.png) no-repeat}
        .unhold-disabled{background: url(./images/unhold1.png) no-repeat}
        .unhold:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .hangup{background: url(./images/hangup.png) no-repeat}
        .hangup-disabled{background: url(./images/hangup1.png) no-repeat}
        .hangup:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .transfer{background: url(./images/transfer.png) no-repeat}
        .transfer-disabled{background: url(./images/transfer1.png) no-repeat}
        .transfer:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

        .threeway{background: url(./images/threeway.png) no-repeat}
        .threeway-disabled{background: url(./images/threeway1.png) no-repeat}
        .threeway:hover{border:1px solid #b1defd;background-color:#e6f3fc;}

    </style>
</head>
<body>
    <table style="border:1px solid #c4dff6;background-color:#ecf2f7;">
        <tr>
            <td><button id="register" class="register"></button></td>
            <td><button id="unregister" class="unregister" style="display: none;"></button></td>
            <td><button id="ready" class="ready"></button></button></td>
            <td><button id="notready" class="notready"></button></td>
            <td><button id="busy" class="busy"></button></td>
            <td><input type="text" name="tel_num" id="tel_num" style="width:150px"></td>
            <td><button id="makecall" class="makecall"></button></td>
            <td><button id="answer" class="answer"></button></td>
            <td><button id="hangup" class="hangup"></button></td>
            <td><button id="hold" class="hold"></button></td>
            <td><button id="unhold" class="unhold" style="display: none;"></button></td>
            <td><button id="transfer" class="transfer"></button></td>
            <td><button id="threeway" class="threeway"></button></td>
            <td>
                <div style="margin-left: 5px">
                    <div style="margin:0 auto"><label class="label-title">电话状态</label></div>
                    <div style="margin:0 auto"><label class="label-content" id="callstate">签出</label></div>
                </div>
            </td>

            <td>
                <div style="margin-left: 5px">
                    <div style="margin:0 auto"><label class="label-title">时长</label></div>
                    <div style="margin:0 auto"><label class="label-content" id="calltime">00:00:00</label></div>
                </div>
            </td>

            <td>
                <div style="margin-left: 5px">
                    <div style="margin:0 auto"><label class="label-title">坐席号码</label></div>
                    <div style="margin:0 auto"><label class="label-content" id="agentnumber">&nbsp;&nbsp;</label></div>
                </div>
            </td>

            <td>
                <div style="margin-left: 5px">
                    <div style="margin:0 auto"><label class="label-title">客户号码</label></div>
                    <div style="margin:0 auto"><label class="label-content" id="callnumber">&nbsp;&nbsp;</label></div>
                </div>
            </td>
        </tr>
    </table>
    <audio src="./sources/ring.wav" loop id="ringAudio"></audio>
    <audio src="./sources/hangup.wav" id="hangupAudio"></audio>
</body>
</html>